<!--
 * @Author: zwc 6537397+uni-yunApp@user.noreply.gitee.com
 * @Date: 2024-07-23 13:54:31
 * @LastEditors: zwc 6537397+uni-yunApp@user.noreply.gitee.com
 * @LastEditTime: 2024-07-24 14:27:46
 * @FilePath: \za-workbench-main\src\views\test\test.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="test">
    <commonForm v-model:ruleForm="ruleForm" :formOptions="formOptions" :ruleConfig="ruleConfig">
      <template v-slot:name>
        <el-form-item label="Approved by" prop="user">
       <el-input v-model="ruleForm.user" placeholder="Approved by" clearable />
      </el-form-item>
      </template>
    </commonForm>

    <el-button type="primary" @click="handleAdd">新增</el-button>
    <!-- <commonDialog v-model:isShow="isShow" @close="closeDialog">
      <dataTable :tableData="tableData" :dataConfig="dataConfig">
    <template v-slot:user>
      <el-table-column label="用户名" prop="name"  width="120">

      </el-table-column>
    </template>
    </dataTable>
    </commonDialog> -->
    <userDialog></userDialog>
  </div>

</template>

<script setup lang="ts">
import dataTable from './components/elTable/dataTable.vue'
import commonForm from './components/commonForm.vue'
// import commonDialog from './components/commonDialog.vue'
import userDialog from './components/userDialog.vue'
import { provide } from 'vue';
interface formDataItem {
  name:string,
  age:string|number,
  [key:string]:any
}
interface ruleItem {
  required?:boolean,
  message:string,
  trigger:string,
  [key:string]:string|boolean|number | undefined
}
interface ruleObj {
[key:string]:Array<ruleItem>
}
const ruleForm = reactive<formDataItem>({
  name:'',
  age:12,
  user:''
})
const ruleConfig = ref<ruleObj>({
  name:[
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  user:[
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ]
})
const formOptions = [
  {
    slotName:'name'
  },
  {
    type:'input',
    label:'name',
    field:'name'
  },
  {
    type:'select',
    label:'age',
    field:'age',
    enums:{
      1:'12',
      2:'13'
    }
  },
  {
    slotName:'name'
  },
  {
    slotName:'name'
  },
  {
    slotName:'name'
  },
  {
    slotName:'name'
  },
  {
    slotName:'name'
  },
  {
    slotName:'name'
  },
  {
    slotName:'name'
  },
  {
    slotName:'name'
  },
]
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const dataConfig = ref([
  {
   type:'selection'
  },
  {
   slotName:'user'
  },
  {
    prop:'date',
    label:'日期',
    width:200
  },
  {
    prop:'name',
    label:'名字',
    width:200
  },
  {
    prop:'address',
    label:'地址',
  }
])
const isShow = ref<boolean>(false)
provide('isShow',isShow)
const handleAdd = ()=>{
  isShow.value = true
  console.log('isshow',isShow.value)
}
const closeDialog = ()=>{
  isShow.value = false
}
</script>

<style>
.test{
  padding: 20px;
}
</style>
